<template>
  <el-dialog 
    title="历史"
    v-model="state.show"
    width="950px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
    @cancel="cancel"
  >
    <div>
      <el-row>
        <el-col :span="4">
          <h4>历史数据</h4>
        </el-col>
        <el-col :span="16">
          <el-date-picker
            v-model="state.historyTime"
            type="datetimerange"
            :picker-options="state.pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="timeRangeChange"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-radio-group v-model="state.dataType">
            <el-radio-button label="">无</el-radio-button>
            <el-radio-button label="stats">统计</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <PropertyChart :name="state.propertyHistory.name" :properties="state.propertyHistory.data"></PropertyChart>
    </div>
  </el-dialog> 
</template>

<script lang="ts" setup>
import PropertyChart from './PropertyChart.vue'
import { devicePropertyLogs } from '../api/devices.api'

const state = reactive({
  show: false,
  row: {} as any,
  sw: 0,
  sl: 0,  
  name: '',
  historyTime: [new Date(new Date().getTime() - 24 * 3600 * 1000), new Date(new Date().getTime() + 24 * 3600 * 1000)],
  dataType: '',
  propertyHistory: {
    name: '',
    data: [],
  },
  pHName: '',
  pickerOptions: {
    shortcuts: [
      {
        text: '最近1小时',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000)
          picker.$emit('pick', [start, end])
        },
      },
      {
        text: '最近6小时',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 6)
          picker.$emit('pick', [start, end])
        },
      },
      {
        text: '最近1天',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24)
          picker.$emit('pick', [start, end])
        },
      },
      {
        text: '最近5天',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 5)
          picker.$emit('pick', [start, end])
        },
      },
    ],
  }
})

const openDialog = (n, row: any) => {
  state.show = true
  state.historyTime = [new Date(new Date().getTime() - 24 * 3600 * 1000), new Date(new Date().getTime() + 24 * 3600 * 1000)]
  state.row = row
  state.pHName = n
  switch (row.productKey) {
    case 'Bwmac6pph45mSTFY': // 4G单灯控制器
    case 'fKwZ8dkErkpSJKEr': // 4G灯控制电源(福硕)
      if (n == '电流') {
        state.name = 'current'
      } else if (n == '电压') {
        state.name = 'voltage' 
      } else if (n == '功率') {
        state.name = 'active_power'
      }
      break
    case 'fHnYRFCEhDe5Z6he': // 4G灯控制电源(新创)
      if (n == '电压') {
        state.name = 'ac_vol' 
      } else if (n == '电流') {
        state.name = 'ac_cur' 
      } else if (n == '功率') {
        state.name = 'activepwr'
      }
      break
    case 'fMeiBGaMcjiQiGiR': // 技象Lora单灯控制器
      if (n == '电压') {
        state.name = 'Voltage' 
      } else if (n == '电流') {
        state.name = 'Current' 
      } else if (n == '功率') {
        state.name = 'active_power'
      }
      break
  }
  nextTick(async () => {
    refreshPropertyHistory()
  })
}

const loading = ref(false)
const refreshPropertyHistory = () => {
  var end = state.historyTime[1]
  var start = state.historyTime[0]
  loading.value = true
  devicePropertyLogs({
    deviceId: state.row.deviceId,
    name: state.name,
    start: start.getTime(),
    end: end.getTime(),
  })
    .then((res) => {
      state.propertyHistory.name = state.pHName
      state.propertyHistory.data = res.data
    })
    .finally(() => {
      loading.value = false
    })
}

const timeRangeChange = () => {
  refreshPropertyHistory()
}

const cancel = () => {
  state.propertyHistory = {
    name: '',
    data: [],
  }
  state.historyTime = [new Date(new Date().getTime() - 24 * 3600 * 1000), new Date(new Date().getTime() + 24 * 3600 * 1000)]
  state.dataType = ''
  state.pHName = ''
  state.show = false
}

defineExpose({
  openDialog,
})
</script>
